<template>
	<view>
		<u-toast ref="uToast" />
		<view v-if="show" class="loading_view" style="padding:220rpx 0;">
		  <u-loading mode="circle" size="50"></u-loading>
		  <view class="messgae">
			加载中...
		  </view>
		 </view>
		<view class='list' v-else v-for="(v,k) in list" :key="k" @click="onUser" :data-id="v.u_id">
			<view class="img">
				<image :src='v.u_icon'></image>
			</view>
			<view class='right'>
				<view class='name'>
					<view class="n">
						<text class="hg" v-if="v.u_supremeTime==1">{{v.u_nickname}}</text>
						<text class="hy" v-else-if="v.u_memberTime==1">{{v.u_nickname}}</text>
						<text v-else>{{v.u_nickname}}</text>
						<image src="../../static/image/hg.png" v-if="v.u_supremeTime==1"></image>
						<image src="../../static/image/hy.png" v-else-if="v.u_memberTime==1"></image>
					</view>
				</view>
				<view class='qt'>
					<view class='age'>{{v.info.u_age}}</view>
					<view class='xz'>{{v.info.u_star}}</view>
				</view>
			</view>
			<view class='right2'>
				<view v-if="type!=2" @click="onF" :data-id="v.u_id" :class="v.status==1?'qg':''">{{v.status==1?'已喜欢':'喜欢'}}</view>
				<view v-else @click="onF" :data-id="v.u_id" :class="v.status==1?'qg':''">{{v.status==1?'互相喜欢':'回关'}}</view>
			</view>
		</view>
		<view v-if="showError!=''" class='empty'>
			<u-loading mode="circle" v-if='load' size="50"></u-loading>
			<text>{{showError}}</text>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				type:1,
				list:{},
				page:1,
				allpage:1,
				show:true,
				load:false,
				showError:''
			}
		},onLoad(e){
			var type=typeof(e.type);
			
			if(type!='undefined'){
				this.type=Number(e.type);
				
				var title=['','我喜欢','互相喜欢','喜欢我'];
				
				if(this.type<=0){
					this.type=1;
				}else if(this.type>3){
					this.type=3;
				}
				
				uni.setNavigationBarTitle({
				    title: title[this.type]
				});
				
				this.list={};
				
				this.onList();
			}
		},onPullDownRefresh() {
			this.show=true;
			
			this.showError='';
			
			this.list={};
			
			this.onList();
		},onReachBottom() {
			var page=this.page;
			
			page++;
			
			if(page>=this.allpage){
				this.showError='暂无更多用户了~';
				
				return;
			}
			
			this.showError='加载中...';
			
			this.onList(page);
		},methods:{
			onUser(e){
				var id=e.currentTarget.dataset.id;
				
				uni.navigateTo({
				    url: '/pages/user/userInfo?id='+id
				});
			},
			onList(page=1){
				var that=this;
				
				this.$request({
					url:'/user/my_like',
					data:{page:page,type:this.type},
					success(res){
						if(res.data.code==1){
							var data=res.data.data;
							
							that.page=data.page;
							
							that.allpage=data.allpage;
							
							for(var i in data.list){
								that.list[i]=data.list[i];
							}
							
							that.show=false;
							
							that.load=false;
							
							that.showError='';
							
							if(that.page>=that.allpage){
								that.showError='暂无更多用户了~'
							}
							
							uni.stopPullDownRefresh();
						}else{
							that.show=false;
							
							that.load=false;
							
							that.showError=res.data.msg;
						}
					},fail(){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type: 'warning'
						})
					}
				})
			},
			onF(e){
				var id=e.currentTarget.dataset.id;
				
				var that=this;
				
				let list = JSON.parse(JSON.stringify(this.list))
				
				var status=list[id].status;
				
				status=status==1?0:1;
				
				this.list=list;
				
				this.$request({
					url:'/user/follow',
					data:{id:id},
					success(res){
						if(res.data.code==1){
							list[id].status=status;
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type: 'warning'
							})
						}
					},fail(){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type: 'warning'
						})
					}
				})
			}
		}
	}
</script>

<style scoped src='../../static/css/nearby.css'>
</style>

<style scoped>
	.right .qt{
		padding-top:40rpx;
	}
	.right2{
		width:120rpx;
		padding:40rpx 0;
	}
	.right2 view{
		background:#EA4389;
		color:#fff;
		padding:10rpx 0;
		text-align: center;
	}
	.right2 .qg{
		background:rgba(100,100,100,0.3);
	}
</style>